<template>
  <div>
    <n-upload
      ref="upload"
      :default-upload="false"
      :show-file-list="false"
      @change="handleChange"
    >
      <n-button>选择文件</n-button>
    </n-upload>
    <div class="file-view" ref="refFileView"></div>
    <excel-view />
  </div>
</template>

<script lang="ts" setup name="fileView">
  import type { UploadFileInfo } from 'naive-ui'
  import { fileType } from '@/utils/file/file-type'
  import FileView from '@/utils/file/file-view'
  import excelView from './excel-view.vue'

  const refFileView = ref<HTMLDivElement | null>(null)
  const fileView = new FileView()
  async function handleChange({ file }: { file: UploadFileInfo }) {
    const fileType_ = await fileType(file.file)
    if (file.file) {
      switch (fileType_.ext) {
        case 'docx':
          return await fileView.renderWord(file.file, refFileView.value)
        case 'pdf':
          await fileView.renderPdf(refFileView.value, file.file)
      }
    }
  }
</script>

<style lang="less" scoped>
  .file-view {
    width: 100%;
    height: 600px;
    overflow: auto;
  }
</style>
